<template>
	<div>
		<city-hader></city-hader>
		<city-search></city-search>
		<city-list :cities="cities" :hot="hotCities"></city-list>
		<city-alphabet :cities="cities"></city-alphabet>
	</div>
</template>

<script>
	import axios from 'axios'
	import CityHader from './components/Hader'
	import CitySearch from './components/Search'
	import CityList from './components/list'
	import CityAlphabet from './components/Alphabet'
	export default {
		name:'City',
		components:{
			CityHader,
			CitySearch,
			CityList,
			CityAlphabet
		},
		data(){
			return{
				cities:{},
				hotCities:[]
			}
		},
		mounted () {
			this.gitCityInfo()
		},
		methods:{
			gitCityInfo () {
				axios.get('/api/city.json').then((res)=>{
					console.log(res)
					var res=res.data;
					if(res.ret && res.data){
						this.cities=res.data.cities;
						this.hotCities=res.data.hotCities;
					}
				})
			}
		}
		
	}
</script>

<style>
</style>